<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
     <meta charset="UTF-8">
     <title>商品列表</title>
     <link rel="stylesheet" href="static/css/product.css">
     <script src="static/js/vue-2.6.10.js"></script>
     <script src="static/js.axios.min.js"></script>
</head>
<body>
 <div class="product-list" id="app">
    <div class="product-item" v-for="product in product_list ">
     <div class="product-img">
     < img src="static/img/productImages/" >
     </div>
     <div class="product-info" >
     <div>品名：<span>{{product.name}}</span></div>
    <div>原价：<span>{{product.market_price}}</span></div>
     <div>现价：<span>{{product.sell_price}}</span></div>
     <div>简介：<span>{{product.description}}</span></div>
     <div>查看详细内容</div>
    </div>
    </div>
    <div class="product-item">
    <div class="product-img">
    < img src="" alt="">
     </div>
     <div claass="product-info">
    <div>品名：<span>{{product.name}}</span></div>
     <div>原价：<del>4.0</del>元</div>
     <div>现价：<span>1.0</span>元</div>
     <div>简介：<span></span></div>
     <div>查看详细内容</div>
     </div>
    </div>
    <script>
    let vue =new Vue({
        el:'#app',
        data:{
            product_list:[],
            product:{
                "name":"猪猪"
            }
        },
        created(){
            //异部请求
            axios.get("product.do").then(function(data){
                //使用获取到的数据替换商品列表
                vue.product_list = result.data
            });
        },
        methods:{

        }
    });
</script>
     </div>
</body>
</html>